<template>
  <div class="warpper-box">
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-month-picker @change="handleRangeChange2" format="YYYY-MM"></a-month-picker>
      </a-form-item>
      <a-form-item label="企业">
        <a-select v-model="achievementsParams.enterpriseIdList" placeholder="选择企业" style="min-width: 200px;"
          mode="multiple">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch(2)">查询</a-button>
      </a-form-item>
    </a-form>
    <!-- 考勤管理图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <div id="achievementsChart" style="width: 100%;height: 600px;"></div>
    </div>

    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-month-picker @change="handleRangeChange3" format="YYYY-MM"></a-month-picker>
      </a-form-item>
      <a-form-item label="企业">
        <a-select v-model="dataHandleParams.enterpriseIdList" placeholder="选择企业" style="min-width: 200px;"
          mode="multiple">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch(3)">查询</a-button>
      </a-form-item>
    </a-form>
    <!-- 数据处理图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <a-tabs type="card" v-model="dataHandleParams.groupFields" @change="dataHandleChange">
        <a-tab-pane key="resident" tab="户口">
        </a-tab-pane>
        <a-tab-pane key="education_level" tab="学历">
        </a-tab-pane>
      </a-tabs>
      <div id="dataHandleChart" style="width: 100%;height: 600px;"></div>
    </div>
  </div>
</template>

<script>
import {
  overViewDisabledAchievementsByStatus,
  overViewDisabledCheckData,
} from "@/api/human/disabled"
import moment from 'moment';
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: "compositeDetailEcharts",
  data() {
    return {

      rangeDate: [],

      statisticsInfo: {}, // 统计数据

      achievementsParams: {
        yearMonth: null,
        enterpriseIdList: undefined
      },
      achievementsList: {}, // 考勤管理列表
      dataHandleParams: {
        yearMonth: null,
        enterpriseIdList: undefined,
        groupFields: "resident",
      },
      dataHandleList: [], // 数据处理统计列表

      colorList: [], // 随机颜色组
      enterpriseData: [], // 企业列表
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    moment,
    // 获取统计数据
    async getData() {
      this.getEnterpriseData();
      this.getColorList();
      this.getOverViewDisabledachievements();
      this.getOverViewDisableddataHandle();
    },
    getColorList() {
      this.colorList = Array.from({ length: 300 }, () => {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        const toHex = (colorValue) => {
          let hex = colorValue.toString(16);
          return hex.length == 1 ? "0" + hex : hex;
        };
        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
      })
    },
    // 日期选择
    handleRangeChange1(value, mode) {
      this.rangeDate = value;
      this.staffParams.actionDayStartTime = moment(value[0]).format("YYYY-MM");
      this.staffParams.actionDayEndTime = moment(value[1]).format("YYYY-MM");
    },
    handleRangeChange2(value, mode) {
      this.achievementsParams.yearMonth = value ? moment(value).format("YYYY-MM") : null;
    },
    handleRangeChange3(value, mode) {
      this.dataHandleParams.yearMonth = value ? moment(value).format("YYYY-MM") : null;
    },
    // 导出功能
    exportTable() {
      let params = this.staffParams;
      exportDisabledStaff(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '残疾人花名册.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 获取客户员工
    async getEnterpriseData() {
      this.enterpriseData = await store.dispatch('department/getAllEnterprise');
    },

    // 初始化考勤管理
    async getOverViewDisabledachievements() {
      const { code, data } = await overViewDisabledAchievementsByStatus(this.achievementsParams);
      if (code === '1') {
        this.achievementsList = data;
        this.initOverViewDisabledachievements();
      }
    },
    // 考勤管理
    initOverViewDisabledachievements() {
      const myChart = echarts.init(document.getElementById("achievementsChart"));
      let color = this.colorList.slice(100, 199);

      let xAxisData = this.achievementsList.x;
      let yAxisData = this.achievementsList.y;
      let seriesData = [];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }
      yAxisData.forEach((item, index) => {
        seriesData.push({
          name: item.name,
          type: 'line',
          // smooth: true,
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            shadowColor: '#fff',
            shadowBlur: 10
          },
          label: {
            show: false,
            position: 'right',
            color: color[index]
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: hexToRgba(color[index], 0.6)
              },
              {
                offset: 1,
                color: hexToRgba(color[index], 0)
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: item.data
        })
      })

      let option = {
        backgroundColor: "#fff",
        color: color,
        legend: {
          itemWidth: 14,
          itemHeight: 14,
          top: 40,
          right: 30,
          textStyle: {
            fontSize: 14,
            color: '#737A85'
          }
        },
        title: {
          text: `{a|考勤管理统计}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: 'center',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = '';
            params.forEach(v => {

              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                次`;
            })
            return html
          },
        },
        grid: {
          top: 140,
          left: '5%',
          right: '5%',
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 12,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        xAxis: [{
          type: "category",
          axisLine: {                     // 轴线设置
            show: false,                   // 显示轴线
          },
          axisLabel: {
            textStyle: {
              color: '#737A85',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '单位：次',
          minInterval: 1,
          nameTextStyle: {
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#737A85',
              type: 'dashed'
            },
          },
          axisLabel: {
            textStyle: {
              color: '#737A85',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
          },
        }],
        series: seriesData
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    dataHandleChange() {
      this.getOverViewDisableddataHandle();
    },
    // 初始化数据处理
    async getOverViewDisableddataHandle() {
      const { code, data } = await overViewDisabledCheckData(this.dataHandleParams);
      if (code === '1') {
        this.dataHandleList = data;
        this.initOverViewDisableddataHandle();
      }
    },
    // 数据处理
    initOverViewDisableddataHandle() {
      const myChart = echarts.init(document.getElementById("dataHandleChart"));
      let color = this.colorList.slice(200, 299);

      let xAxisData = this.dataHandleList.x;
      let yAxisData = this.dataHandleList.y;
      let seriesData = [];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }

      let option = {
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: '8%',
          // type: 'plain',
          textStyle: {
            color: '#737A85',
            fontSize: 12
          },
          //icon:'icon',
          // itemGap: 1,
          itemWidth: 10,
          itemHeight: 10,
        },
        title: {
          text: `{a|数据处理统计}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: 'center',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>`;
            })
            return html
          },
        },
        grid: {
          top: 140,
          left: '5%',
          right: '5%',
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 12,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(108, 166, 219, 1)'
            }
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#737A85',
              padding: 5,
              fontSize: 14
            },
            formatter: function (data) {
              return data;
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#192a44'
            }
          },
          axisTick: {
            show: false
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '',
          minInterval: 1,
          nameTextStyle: {
            color: '#737A85',
            fontSize: 12
          },
          // min: 0,
          splitLine: {
            lineStyle: {
              color: 'rgba(108, 166, 219, 0.5)',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#233653'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#737A85',
              padding: 2
            },
            formatter: function (value) {
              if (value === 0) {
                return value;
              }
              return value;
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: {
          name: "人数",
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: color[0] // 线条颜色
            },
            borderColor: hexToRgba(color[0], .4)
          },
          itemStyle: {
            color: color[0],
            borderColor: '#646ace',
            borderWidth: 0
          },
          tooltip: {
            show: true
          },
          data: yAxisData
        }
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 搜索
    onSearch(i) {
      if (i == 1) {
        this.getOverViewDisabledStaff();
      } else if (i == 2) {
        this.getOverViewDisabledachievements();
      } else {
        console.log(this.dataHandleParams);

        this.getOverViewDisableddataHandle();
      }
    },
    // 重置
    onReset() {
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped></style>
